import type { SearchFormItemType, ColumnType } from '~/pages/table-diagraming/types/index'
import { TablePageTemplate } from './template'

const complier = (
  searchFormSource: SearchFormItemType[],
  columnItemsSource: ColumnType[],
  interactionElements: InteractionElementType[]
): string => {
  const searchTemplate = complierSearch(searchFormSource)
  const queryParamsTemplate = complierQueryParams(searchFormSource)
  const tableTemplate = complierTable(columnItemsSource)
  const pageInteraction = complierInteraction(interactionElements)
  console.log('complier', pageInteraction)
  let res = TablePageTemplate.replace('>>searchFormTemplate<<', searchTemplate)
    .replace('>>queryParamsTemplate<<', queryParamsTemplate)
    .replace('>>tableTemplate<<', tableTemplate)
    .replace('>>dialogScriptTemplate<<', pageInteraction.script)
    .replace('>>dialogTemplateTemplate<<', pageInteraction.template)
    .replace('>>dialogImportTemplate<<', pageInteraction.importTemplate)

  return res
}

// 渲染检索区域
const complierSearch = (searchFormSource: SearchFormItemType[]): string => {
  const res = searchFormSource
    .map((item) => formItemCompliter[item.type](item))
    .join('\n')
  return res
}
const formItemCompliter: { [key: string]: (option: SearchFormItemType) => string } = {
  input: (option: SearchFormItemType) => {
    return `<el-form-item prop="${option.modelKey}">
              <el-input
                v-model="queryParams.${option.modelKey}"
                placeholder="${option.placeholder}"
                clearable
                @change="query"
              ></el-input>
            </el-form-item>`
  },
  select: (option: SearchFormItemType) => {
    return `<el-form-item prop="${option.modelKey}">
              <el-select
                v-model="queryParams.${option.modelKey}"
                placeholder="${option.placeholder}"
                @change="query"
                clearable
              >
                <el-option
                  v-for="item in ${option.options}"
                  :key="item['value']"
                  :label="item['label']"
                  :value="item['value']"
                ></el-option>
              </el-select>
            </el-form-item>`
  },
  date: (option: SearchFormItemType) => {
    return `<el-date-picker
              v-model="queryParams.${option.modelKey}"
              type="${option.dateType}"
              format="${option.dateFormat}"
              value-format="${option.dateFormat}"
              start-placeholder="${option.placeholder}"
              end-placeholder="${option.placeholder}"
            >
            </el-date-picker>`
  }
}

const complierQueryParams = (searchFormSource: SearchFormItemType[]) => {
  const temp = searchFormSource.map((item) => `${item.modelKey}: ''`)
  return temp.join(',\n')
}

//  渲染表格区域
const complierTable = (columnItemsSource: ColumnType[]): string => {
  console.log('columnItemsSource', columnItemsSource)
  const res = columnItemsSource
    .map((item) => {
      const prop = item.prop.length === 1 ? item.prop[0] : item.prop.join('+')
      const template = item.prop.length > 1
      let templateContent = ''
      if (template) {
        templateContent = `\n<template #default="{ row }"> ${item.prop
          .map((prop) => `<div>{{ row.${prop} }}</div>`)
          .join('\n')} </template>\n`
      }

      return `<el-table-column label="${item.label}" prop="${prop}" ${
        item.minWidth ? `min-width="${item.minWidth}"` : `width="${item.width}"`
      } ${item.align ? `align="${item.align}"` : ''} >${
        template ? templateContent : ''
      }</el-table-column>`
    })
    .join('\n')

  return res
}

// 渲染页面弹窗等级交互
const complierInteraction = (interactionElements: InteractionElementType[]) => {
  let script = ''
  let template = ''
  let importTemplate = ''

  interactionElements.forEach((item, index) => {
    switch (item.type) {
      case 'dialog':
        script += `const [dialog${index + 1}Toggle, handleDialog${
          index + 1
        }Toggle] = useToggle()\n`
        template += `<page-dialog${index + 1} v-model="dialog${index + 1}Toggle"  />\n`
        importTemplate += `import PageDialog${index + 1} from './components/PageDialog${
          index + 1
        }.vue'\n`
        break
      default:
        break
    }
  })

  return {
    script,
    template,
    importTemplate
  }
}

// 编译 dialog弹窗内容文件
export const complierDialogFileContent = (interactionElement: InteractionElementType) => {
  return `<script setup lang="ts">
import { ref } from 'vue'

const open = defineModel<boolean>({ default: false })

const close = () => {
  open.value = false
}

const submit = () => {
  close()
}
</script>

<template>
  <el-dialog v-model="open" title="${interactionElement.title}" width="666">
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>
`
}

export default complier
